<template>
  <div class="layer-item">
    <div style="margin-bottom:10px">{{layerTitle}}</div>
    <div class="item-content" v-for="(option,i) in layerControlList" :key="i">
      <div class="left">
        <el-checkbox style="margin: 5px 0 0 3px;" @change="isShow(option.isSelect,option.layerId)" v-model="option.isSelect">{{option.layerName}}</el-checkbox>
        <div style="display:flex;align-items: center;font-size: 15px;padding-left: 30px;color:#fff">透明度：
          <el-slider style="margin-left:15px" :style="{width:sliderWidth}" :format-tooltip="formatTooltip" @change="updateOpacity(option)" v-model="option.opacity" :disabled="!option.isSelect"></el-slider>
        </div>
      </div>
      <div class="handle">
        <i class="el-icon-top" style="cursor: pointer;" v-show="i>0" @click="changeIndex(i,i-1)"></i>
        <i class="el-icon-bottom" style="cursor: pointer;" v-show="i<dataLength-1" @click="changeIndex(i,i+1)"></i>
        <i class="el-icon-delete" style="cursor: pointer;margin-left:10px" @click="removeLayer(i,option.layerId)"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  computed: {
    dataLength () {
      return this.layerControlList.length
    }
  },
  props: {
    layerTitle: {
      type: String,
      default: ''
    },
    layerControlList: {
      type: Array,
      default: () => []
    },
    //控制滑块宽度
    sliderWidth: {
      type: String,
      default: '150px'
    }
  },
  methods: {
    formatTooltip (val) {
      return val / 100;
    },
    changeIndex (index, otherIndex) {
      let layerIndex = this.layerControlList[index].layerIndex
      let changeLayerIndex = this.layerControlList[otherIndex].layerIndex
      this.$set(this.layerControlList[index], 'layerIndex', changeLayerIndex)
      this.$set(this.layerControlList[otherIndex], 'layerIndex', layerIndex)
      let data = this.layerControlList[index]
      let changeData = this.layerControlList[otherIndex]
      this.$set(this.layerControlList, otherIndex, data)
      this.$set(this.layerControlList, index, changeData)
      this.eventBus.$emit('updateLayerIndex', this.layerControlList)
    },
    //更新图层顺序
    updateLayerIndex () {

    },
    isShow (show, layerId) {
      if (show) {
        this.showLayer(layerId)
      } else {
        this.hideLayer(layerId)
      }

    },
    //更新指定图层透明度
    updateOpacity (data) {
      this.eventBus.$emit('updateOpacity', data);
    },
    //让指定图层显示
    showLayer (layerId) {
      this.eventBus.$emit('showLayer', layerId);
    },
    //让指定图层隐藏
    hideLayer (layerId) {
      this.eventBus.$emit('hideLayer', layerId);
    },
    removeLayer (index, layerId) {
      this.layerControlList.splice(index, 1)
      this.eventBus.$emit('removeLayer', layerId);
    }
  },
  mounted () {
  }

}
</script>

<style scoped>
.layer-item {
  margin: 20px 0 0 10px;
  color: #fff;
}
.layer-item .item-content {
  height: 65px;
  margin-top: 5px;
  padding: 0 10px;
  border-bottom: 1px solid #bbb;
}

.layer-item .item-content .left {
  height: 100%;
  float: left;
  width: 83%;
}
.layer-item .item-content .handle {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  float: left;
  width: 17%;
}
.layer-item .el-checkbox__label {
  color: #fff;
}
</style>
